<template>
  <div class="yaoCategory">
    <!-- //头部搜索 -->
    <van-nav-bar fixed placeholder left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-search placeholder="请输入搜索关键词" v-model="value" @click="gotoSearch" />
      </template>
    </van-nav-bar>
    <!-- //主要内容 -->
    <div class="main">
      <!-- //tab切换 -->
      <van-sidebar v-model="activeKey" class="left">
        <van-sidebar-item
          v-for="(item, index) in medicineList"
          :key="item.cid"
          :title="item.name"
          @click="getCurrentIndex(index)"
        />
      </van-sidebar>
      <!-- 按钮 -->
      <div class="right subject" v-if="medicineList.length > 0">
        <van-grid>
          <van-grid-item
            v-for="item in medicineList[currentIndex].list"
            :key="item.cid"
            :text="item.name"
          >
          </van-grid-item>
        </van-grid>
        <div class="nothings" v-if="!medicineList[currentIndex].list">
          <h2>暂时没有数据</h2>
        </div>
        <!-- 商品分类展示 -->
        <div
          v-for="sort in medicineList[currentIndex].list"
          class="subject-item"
          :key="sort.cid"
        >
          <h3>{{ sort.name }}</h3>
          <div class="goodsFlex">
            <div
              class="goods"
              v-for="goods in sort.list"
              :key="goods.cid"
              @click="getGoodsId(goods)"
            >
              <img
                :src="
                  goods.imageUrl
                    ? goods.imageUrl
                    : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14390297276%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653658435&t=e3a64b36e66ec476ea0895e8a94e9cf2'
                "
              />

              <span>{{ goods.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as http from "@/api/category.js";
export default {
  data() {
    return {
      activeKey: 0,
      medicineList: "",
      currentIndex: 0,
      value: "",
    };
  },

  methods: {
    // 搜索
    onClickLeft() {
      this.$router.go(-1);
    },
    gotoSearch() {
      this.$router.push("/SearchNoKeywords");
    },
    //下标,回到顶部
    getCurrentIndex(index) {
      this.currentIndex = index;
      window.scrollTo(0, 0);
      // console.log(this.currentIndex);
      // console.log(this.medicineList[this.currentIndex]);
    },
    //网络请求数据
    async getmedicineList() {
      var res = await http.getmedicineList();
      this.medicineList = res.data.data;
      // console.log(res.data.data,'nada拿到数据了');

    },
    //点击拿到商品的id
    getGoodsId(goods) {
      // console.log(goods.name);
      this.$store.commit("search/getGoodsName", goods.name);
      window.scrollTo(0, 0);
      this.$router.push({
        path: `/Search/${goods.name}`,
      });
    },
  },
  created() {
    this.getmedicineList('呼吸机');
  },
};
</script>
<style lang="scss">
.yaoCategory {
  .main {
    margin-top: 0.1rem;
    display: flex;
    .right {
      flex: 1;
    }
    .van-search {
      padding: 0.1rem 0;
    }
  }
  //左边
  .left {
    position: fixed;
    left: 0;
  }
  .van-sidebar-item {
    line-height: normal;
    .van-sidebar-item__text {
      width: 1.46rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .van-sidebar-item--select::before {
      height: 1rem;
      background: skyblue;
    }
  }
  // 右边
  .subject {
    margin-left: 1.6rem;
    width: calc(100% - 1.6rem);
    padding-bottom: 1rem;
    .van-grid-item,
    .van-grid-item__text {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .label-list {
      padding-left: 0.133333rem;
    }
    .subject-item {
      h3 {
        text-align: center;
        background-image: linear-gradient(
          20deg,
          rgb(34, 122, 180) 20%,
          rgb(253, 253, 253) 100%
        );
        border-radius: 10px;
      }
      .goodsFlex {
        padding: 0.4rem 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
      .goods {
        display: flex;
        margin-left: 0.14rem;
        width: 1.8rem;
        height: 2rem;
        flex-direction: column;
        justify-content: center;

        align-items: center;
        img {
          width: 1.4rem;
          height: 1.3rem;
        }
      }
    }
    .nothings {
      text-align: center;
      line-height: 10rem;
    }
  }
}
</style>
